<template>
    <div class="floating-box rax-view-v2">
      <!-- 这里放置悬浮框的内容 -->
        <div class="rax-view-v2 item_box radius_top" @click="helpGo('1-7')">
            <div class="item_text">
                <span class="rax-text-v2">竞价规则</span>
            </div>
            <div class="rax-view-v2 pc-elevator-separateLine-jf-TrEU"></div>
        </div>
        <div class="rax-view-v2 item_box" @click="helpGo('1-5')">
            <div class="item_text">
                <span class="rax-text-v2">帮助中心</span>
            </div>
            <div class="rax-view-v2 pc-elevator-separateLine-jf-TrEU"></div>
        </div>
        <div class="rax-view-v2 item_box location" @mouseover="showTooltip" @mouseout="hideTooltip"> 
                <div class="item_text">
                    <span class="rax-text-v2">联系客服</span>
                </div>
                <div  v-if="tooltipVisible" class="tooltip">
                    18731185621
                </div>
            
            <div class="rax-view-v2 pc-elevator-separateLine-jf-TrEU"></div>
        </div>
        <div class="rax-view-v2 item_box" @click="scrollToTop">
            <div class="item_text">
                <span class="rax-text-v2">顶部 </span>
                <i class="el-icon-arrow-up"></i>
            </div>
            <div class="rax-view-v2 pc-elevator-separateLine-jf-TrEU"></div>
        </div>
        <div class="rax-view-v2 qr_box">
            <img src="@/assets/item_form.png" alt="">
            <div class="qr_text">下载app</div>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    data(){
        return{
            tooltipVisible: false
        }
    },
    methods:{
        scrollToTop(){
            window.scrollTo(0, 0);
        },
        showTooltip() {
            this.tooltipVisible = true;
        },
        hideTooltip(){
            this.tooltipVisible = false;
        },
        helpGo(only){
            this.$router.push({path:'/helpCenter',query:{avticeID:only}}) 
        }
    }
  };
  </script>
  
  <style lang="less" scoped>
  @import '@/styles/index.less';
  .floating-box {
    width: 80px;
    box-shadow: 0 1px 19px 0 rgba(0,0,0,.09);
    /* 悬浮框的样式，例如背景色、边框、位置等 */
    position: fixed;
    top: 30%;
    right: 25px;
    transform: translateY(-50%);
    z-index: 10000;
    background-color: #fff;
    font-size: 13px;
    // font-size: 14px;
    border-radius: 10px;
    // border-top-left-radius: 10px;
    // border-top-right-radius: 10px;
    border: 1px solid #f2f2f2;
    color: #666;
    .item_box{
        display: flex;
        align-items: center;
        .item_text{
            padding: 12px;
        }
        .pc-elevator-separateLine-jf-TrEU{
            background: #f2f2f2;
            width: 60px;
            height: 1px;
        }
        &.active{
          // color: @base-color;
          // font-weight: 600;
          background-color: @base-color;
          color: #fff;
        }
    }
    .item_box:hover{
        // color: @base-color;
        // font-weight: 600;
        background-color: @base-color;
        color: #fff;
        .pc-elevator-separateLine-jf-TrEU{
            background: @base-color;
        }
      }

    .radius_top{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
       
    }
    .qr_box{
        margin: 0 -1px;
        background-color: @base-color;
        padding: 4px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        color: #fff;
        .qr_text{
            margin: 4px 0 2px 0;
            text-align: center;
        }
    }
    .location{
        position: relative;
        .tooltip {
            position: absolute;
            top: 4px;
            right: 88px;
            background-color: #fff;
            padding: 10px;
            border-radius: 6px;
            box-shadow: 0 1px 10px 0 rgba(0,0,0,.09);
            color: #666;
        }
        .tooltip::before {
            content: "";
            position: absolute;
            top: 8px;
            right: -14px;
            border-width: 8px;
            border-style: solid;
            border-color: transparent transparent transparent #fff;
        }
    }
    

  }
  
  .rax-view-v2{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
  }
  </style>